<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt"%>
<%
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ request.getContextPath();
%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
 		<link rel="stylesheet" type="text/css" href="<%=basePath %>/css/updateVideo.css" />
        <link rel="stylesheet" href="<%=basePath %>/css/list.css">
		<link href="<%=basePath %>/css/H-ui.min.css" rel="stylesheet" type="text/css" />
		<link href="<%=basePath %>/css/formsCSS.css" rel="stylesheet" type="text/css" />
		<script src="<%=basePath%>/lib/My97DatePicker/WdatePicker.js"></script>
		<script src="<%=basePath %>/js/jquery.min.js"></script>
		<script src="<%=basePath %>/js/formsJS.js"></script>

<script type="text/javascript">

function checkForm(f){
	if(f.indexTypeCode.value.replace(/\s/g,'') == ''){
		alert("分类不能为空");
		$("#indexTypeCode").focus();
		return false;
	}
	if(f.buyType.value.replace(/\s/g,'') == ''){
		alert("购买方式不能为空");
		$("#buyType").focus();
		return false;
	}
	if(f.displayType.value.replace(/\s/g,'') == ''){
		alert("展示方式不能为空");
		$("#displayType").focus();
		return false;
	}
	if(f.saleCount.value.replace(/\s/g,'') == ''){
		alert("活动数量不能为空");
		$("#saleCount").focus();
		return false;
	}
	return true;
}

//选中下拉框选择的值
function choice(){
	var buyType = document.getElementById('buyType').value.trim();   
	 if(buyType==1){
   		 $("#courseId").show();
   		 
   		 $("#courseChapter").hide();
   		 $("#chapterId").hide();
   		 $("#cardId").hide();
   		 $("#courseChapter").val("");
  		 $("#chapterId").val("");
  		 $("#cardId").val("");
  		 $("#chapterId").empty();
   	 }else if(buyType==2){
   		 $("#courseId").hide();
   		 $("#courseChapter").show();
   		 $("#chapterId").show();
   		 $("#cardId").hide();
   		 
   		 $("#courseId").val("");
   		 $("#cardId").val("");
   	 }else if(buyType==3){
   		 $("#courseId").hide();
   		 $("#courseChapter").hide();
   		 $("#chapterId").hide();
   		 $("#cardId").show();
   		 
   		 $("#courseId").val("");
   		 $("#courseChapter").val("");
   		 $("#chapterId").val("");
   		 $("#chapterId").empty();
   	 }else{
   		 $("#courseId").hide();
   		 $("#courseChapter").hide();
   		 $("#chapterId").hide();
   		 $("#cardId").hide();
   		 $("#courseId").val("");
   		 $("#courseChapter").val("");
   		 $("#chapterId").val("");
   		 $("#cardId").val("");
   		 $("#chapterId").empty();
   	 } 	
};
function courseChapterChoice(){
	var courseId = $("#courseChapter").val();
	//清空章节选项
	$("#chapterId").empty();
	$.ajax({
		url:'<%=basePath%>/indexRecommend/queryCourseChapter',
		data:{"courseId":courseId},
		type:'get',
		success:function(msg){
			var w = JSON.parse(msg)
			var option = "<option value=\"\">----选择章节----</option>";
			if(w.length>0){
				for(var i = 0;i < w.length; i++){
					option += "<option value='"+w[i].id+"'>"+w[i].id+":"+w[i].chapterName+"</option>";
				};
			};
			$("#chapterId").append(option);
		},
	});
}

</script>
</head>
<body>
		<div class="connect_wrap">
    		<h3 style= "text-align: center;">课程分类维护</h3>
			<div class="row cl" style="max-width:88%;margin-left:8%;">
			<div class="labelText"></div>
				<form action="<%=basePath%>/indexRecommend/indexRecommendEdit" method="post" onsubmit="return checkForm(this)"
					enctype="multipart/form-data">
					<div class="col-sm-4"></div>
	    					<div class="col-sm-4">
	    							<div class="boxs">
												<input type="hidden" name="id" value="${recommend.id}">
												<select class="selectBox" name="indexTypeCode" id="indexTypeCode">
								    				<option value="">----选择分类----</option>
									    			<c:forEach items="${types}" var="t">
									    				<option value="${t.indexTypeCode}" ${t.indexTypeCode == recommend.indexTypeCode ? 'selected="selected"' : ''}>${t.indexTypeCode}:${t.indexTypeName}</option>
									    			</c:forEach>
					    						</select>
												 
											     <select id="buyType" name="buyType" class="selectBox" onchange="choice()" >
												  	<option value="">购买方式</option>
												  	<option value="1" ${recommend.buyType == 1 ? 'selected="seelcted"' : '' }>按课程</option>
										  			<option value="2" ${recommend.buyType == 2 ? 'selected="seelcted"' : '' }>按章节</option>
										  			<option value="3" ${recommend.buyType == 3 ? 'selected="seelcted"' : '' }>按年卡</option>
												</select>
												
												 <select id="displayType" name="displayType" class="selectBox"  >
												  	<option value="">展示方式</option>
												  	<option value="1" ${recommend.displayType == 1 ? 'selected="seelcted"' : '' }>四图模式</option>
										  			<option value="2" ${recommend.displayType == 2 ? 'selected="seelcted"' : '' }>单图模式</option>
										  			<option value="3" ${recommend.displayType == 3 ? 'selected="seelcted"' : '' }>图标模式</option>
										  			<option value="4" ${recommend.displayType == 4 ? 'selected="seelcted"' : '' }>列表模式</option>
												</select>
												<select class="selectBox" name="courseId" id="courseId">
								    				<option value="-1">----选择课程----</option>
									    			<c:forEach items="${courses}" var="c">
									    				<option value="${c.id}" ${c.id == recommend.courseId ? 'selected="selected"' : ''}>${c.id}:${c.courseName}</option>
									    			</c:forEach>
					    						</select>
					    						
					    						<select class="selectBox" name="courseChapter" id="courseChapter" onchange="courseChapterChoice()">
								    				<option value="-1">----选择课程----</option>
									    			<c:forEach items="${courses}" var="c">
									    				<option value="${c.id}" ${c.id == courseId ? 'selected="selected"' : ''}>${c.id}:${c.courseName}</option>
									    			</c:forEach>
					    						</select>
					    						
					    						<select class="selectBox" name="chapterId" id="chapterId">
								    				<option value="-1">----选择章节----</option>
									    			<c:forEach items="${chapters}" var="c">
									    				<option value="${c.id}" ${c.id == recommend.chapterId ? 'selected="selected"' : ''}>${c.id}:${c.chapterName}</option>
									    			</c:forEach>
					    						</select>
					    						
					    						<select class="selectBox" name="cardId" id="cardId">
								    				<option value="-1">----选择vip卡----</option>
									    			<c:forEach items="${cards}" var="c">
									    				<option value="${c.id}" ${c.id == recommend.cardId ? 'selected="selected"' : ''}>${c.id}:${c.cardName}</option>
									    			</c:forEach>
					    						</select>
					    						
					    						<input type="number" class="inputBox" placeholder="排序" name="orderNum" value="${recommend.orderNum}" >
					    						
					    						<input type="text" class="inputBox" placeholder="活动数量" name="saleCount" id="saleCount" value="${recommend.saleCount}" >
					    						 <input type="text" placeholder="开始时间" class="name Wdate inputBox" name="saleStartTime" id="saleStartTime" 
					    						 value="${recommend.saleStartTime}" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})"><br /><br />
											    		
												<input type="submit" value="确定" class="true" />
												<input type="button"  class="false" value="取消" onclick="window.history.go(-1)">
										</div>
								</div>
					</form>
			</div>
	</div>
	
</body>
<script>

$(function(){
	var buyType = document.getElementById('buyType').value.trim();   
    	 if(buyType==1){
   		 $("#courseId").show();
   		 $("#courseChapter").hide();
   		 $("#chapterId").hide();
   		 $("#cardId").hide();
   	 }else if(buyType==2){
   		 $("#courseId").hide();
   		 $("#courseChapter").show();
   		 $("#chapterId").show();
   		 $("#cardId").hide();
   	 }else if(buyType==3){
   		 $("#courseId").hide();
   		 $("#courseChapter").hide();
   		 $("#chapterId").hide();
   		 $("#cardId").show();
   	 }else{
   		 $("#courseId").hide();
   		 $("#courseChapter").hide();
   		 $("#chapterId").hide();
   		 $("#cardId").hide();
   	 } 
	 
});

</script>
</html>